<template>
    <div class="classification">
        <div class="wrapper">
        <!-- 头部 star  -->
        <div class="header">
            <div class="header_left">
                <a @click="Jump"><img :src="require('../assets/img/bar_icon_back_black.png')" alt=""></a>
            </div>
            <div class="header_center">
                其他分类
            </div>
            <div class="header_right">
                <!-- <a href="">分类</a> -->
            </div>
        </div>
        <!-- 头部 end   -->

        <!-- 主体部分 star  -->
        <div class="main">
            <ul>
                <li v-for="item in classify" :key="item.id">
                    <a @click="turn(item.id)">
                        <div class="img">
                            <img :src="item.img" alt="">
                        </div>
                        <p>
                            {{item.name}}
                            <span>
                                <img :src="item.hot" alt="">
                            </span>
                        </p>
                    </a>
                </li>
                
            </ul>
        </div>
        <!-- 主体部分 end  -->
    </div>
    </div>
</template>

<script>
import {getJsonData} from "../api/home.js"
    export default {
        data() {
            return {
                classify:[],
                routersId:null,
                homeTypeId:null,//记录分类的id
                oldRouters:null,//记录进入分类前的id
                rou:null,//记录进入历史记录之前的id
                ids:null,//记录进入历史记录的id
                old:null,
                name:null,
            };
        },
        methods:{
          turn(id){
            this.$router.push("/homeType?routers=/find&id="+ id);
          },
          Jump(){
            if(this.routersId !=null){
              console.log(this.routersId);
              this.$router.push(this.routersId);
              this.routersId=null
            }else if(this.homeTypeId !=null){
              this.$router.push("/homeType?id="+ this.homeTypeId+"&routers="+this.oldRouters);
              this.homeTypeId=null
              this.oldRouters=null
            }else if(this.rou !=null){
              this.$router.push("/playHistory?rou=" +this.rou);
            }else if(this.old !=null){
              this.$router.push("/searchResult?id=" +this.old+"&name="+this.name);

            }
          }
        },
        created(){
            this.routersId=this.$route.query.routersId;
            this.homeTypeId=this.$route.query.id;
            this.oldRouters=this.$route.query.oldRouters;
            this.rou=this.$route.query.rou;
            this.ids=this.$route.query.ids;
            this.old=this.$route.query.old;
            this.name=this.$route.query.name;

            getJsonData().then(data=>{
                this.classify=data.classify
            })
        }
    }
</script>

<style lang="scss" scoped>
.classification{
.wrapper {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
}
.header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 16px;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 1;
}
.header_left {
  img {
    height: 20px;
    display: block;
  }
}
.header_center {
  font-size: 18px;
  font-weight: 500;
}
.header_right {
  a {
    color: #3e3e3e;
    font-size: 17px;
    font-weight: 600;
  }
}
.main {
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 51px;
      a {
        background-color: #fff;
        border: 1px solid #f4f4f4;
        padding-left: 21px;
        height: 100%;
        display: flex;
        color: #222222;
        font-size: 15px;
        align-items: center;
        p {
          margin-left: 8px;
          img {
            height: 12px;
          }
        }
      }
      .img {
        img {
          width: 21px;
          height: 21px;
          display: block;
        }
      }
    }
  }
}

}
</style>